<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>Title</title>
</head>
<body>
<!--
添加职务 查询职位 根据名称 根据工资区间
修改职位 查询该职位的所有员工的信息
行内工具只需要删除和查看所有员工
-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!--<button class="layui-btn layui-btn-sm"  lay-event="show">查看该部门所有员工</button>-->
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <!--<button class="layui-btn layui-btn-sm" lay-event="update">修改</button>-->
    </div>
</script>

<form class="layui-form" >
    <div class="layui-form-item">
        <label class="layui-form-label" >职务名称</label>
        <div class="layui-input-inline">
            <input  name="name"  lay-verify="required"  placeholder="请输入新职务名称" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">工资</label>
        <div class="layui-input-inline">
            <input  name="wages"   lay-verify="number" placeholder="请输入工资" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button style="margin-left: 100px" type="button" lay-filter="formDemo" lay-submit lay-filter="adddepart" class="layui-btn" >添加新职务</button>
        </div>
    </div>
</form>

<!--
<form class="layui-form" >
<div class="layui-form-item">

    <div class="layui-inline">

        <label class="layui-form-label" >职务名称</label>
        <div class="layui-input-inline">
            <input  name="name"    placeholder="请输入新职务名称" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">工资范围</label>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="min" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="max"  placeholder="￥" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button  type="button" lay-filter="formDemo2" lay-submit lay-filter="adddepart" class="layui-btn" >按照职务名称查询</button>
        </div>
        <div class="layui-input-inline">
            <button type="button" lay-filter="formDemo3" lay-submit lay-filter="adddepart" class="layui-btn" >按照工资区间查询</button>
        </div>
    </div>


</div>
</form>
-->
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.js"></script>
<script>
    layui.use(['jquery','layer', 'form','element','table'], function(){
        var layer = layui.layer,
            element=layui.element,
            form = layui.form,
            table=layui.table,
            $=layui.jquery;
        var tableIns=table.render({
            elem:'#demo',
            /*title:'部门信息管理',*/
            url:'http://localhost:8080/position/selectAll',
            pages:false,
            cols:  [[ //标题栏
                {field: 'id', title: '职务编号'}
                ,{field: 'name', title: '职务名称'}
                ,{field: 'wages', title: '工资'}
                ,{toolbar: '#toolbarDemo',title: '操作',fixed: 'right'}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": "0", //解析接口状态
                    "msg": "", //解析提示文本
                    "data": res //解析数据列表
                };
            }
        }

        );
        form.on('submit(formDemo)', function(data){
            //layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:"http://localhost:8080/position/add",
                data:data.field,
                type:"post",
                dataType:"json",
                success:function(data){
                    if(data===1)
                    {
                        layer.msg("添加成功");
                        tableIns.reload();

                    }
                    else
                    {
                        layer.msg("添加失败");
                    }

                    //layer.msg(data.toString());
                },
                error:function(data){
                    layer.msg("添加失败");
                }
            });
            return false;
        });


        //按照职务名称查询
      /*  form.on('submit(formDemo2)', function(data){
            //layer.msg(JSON.stringify(data.field));
            data=data.field;
            if(data.name!=='')
            {
                $.ajax({
              url:"http://localhost:8080/position/selectByName",
              data:{
                  name:data.name
              },
              type:"post",
              dataType:"json",
              success:function(data){
                 layer.msg("查询成功");
                 console.log(data);
                 tableIns.reload({
                     page:false,
                     url:'http://localhost:8080/position/selectByName',
                    data:{name:data.name},
                     parseData: function(res){ //res 即为原始返回的数据
                         return {
                             "code": "0", //解析接口状态
                             "msg": "", //解析提示文本
                             "data": res //解析数据列表
                         };
                     }
                 })
              },
              error:function(data){
                  layer.msg("查询失败");
              }
          });
          return false;}

            //layer.msg("按照职务名称查询");
        });
*/
        //按照工资区间查询
        form.on('submit(formDemo3)', function(data){
            //layer.msg(JSON.stringify(data.field));
            /*$.ajax({
                url:"http://localhost:8080/position/add",
                data:data.field,
                type:"post",
                dataType:"json",
                success:function(data){
                    if(data===1)
                    {
                        layer.msg("添加成功");
                        tableIns.reload();

                    }
                    else
                    {
                        layer.msg("添加失败");
                    }

                    //layer.msg(data.toString());
                },
                error:function(data){
                    layer.msg("添加失败");
                }
            });
            return false;*/
            //layer.msg("按照职务工资查询");
        });

        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

           if(layEvent === 'delete'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);

                    $.ajax({
                        url:"http://localhost:8080/position/delete",
                        data:{id:data.id},
                        type:"post",
                        dataType:"json",
                        success:function(data){
                            if(data===1)
                            {
                                layer.msg("删除成功");

                            }
                            else
                            {
                                layer.msg("删除失败");
                            }

                            //layer.msg(data.toString());
                        },
                        error:function(data){
                            layer.msg("删除失败");
                        }
                    });


                });
            }
        });





    })
</script>
</body>
</html>